<template>
  <div class="container">
    <!-- 头部搜索框区域 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="sizs">学科名称</span>
        <el-input
          v-model="input"
          placeholder="请输入内容"
          class="inp"
        ></el-input>
        <el-button @click="romvList">清除</el-button>
        <el-button type="primary" @click="searchList">搜索</el-button>
        <el-button type="success" icon="el-icon-edit" style="float: right" @click="addBtn">新增学科</el-button
        >
        <!-- 对话框 -->
        <el-dialog :title="isEdit ? '编辑学科' :'新增学科' " :visible.sync="centerDialogVisible" width="20%" >
        <el-form label-width="80px" class="demo-ruleForm" :rules="rules" ref="roleForm" :model="roleForm" >
          <el-form-item label="学科名称" prop="name" ><el-input placeholder="请输入学科名称" v-model="roleForm.name"></el-input></el-form-item>
            <el-form-item label="是否显示" prop="delivery">
            <el-switch el-switch v-model="roleForm.isFrontDisplay"></el-switch>
        </el-form-item>
        </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="canCel">取 消</el-button>
            <el-button type="primary" @click="clcikAff">确 定</el-button>
          </span>
        </el-dialog>
      </div>

      <!-- 数据显示区域 -->
      <el-alert type="info" class="alert" show-icon
        >数据一共{{ counts }}条</el-alert
      >

      <!-- 表格区域 -->
      <el-table :data="tableData" style="width: 100%" class="table_content">
        <el-table-column label="序号" width="100" type="index"></el-table-column>
        <el-table-column
          prop="subjectName"
          label="学科名称"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="username"
          label="创建者"
          width="180"
        ></el-table-column>
        <el-table-column label="创建日期" width="180">
          <template v-slot='scope'>
            <span>{{scope.row.addDate | formatTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="前台是否显示"
          width="180"
        >
        <template v-slot='scope'>
          <span v-if="scope.row.isFrontDisplay===1">是</span>
          <span v-if="scope.row.isFrontDisplay===2">否</span>
        </template>
        </el-table-column>
        <el-table-column
          prop="twoLevelDirectory"
          label="二级目录"
          width="180"
        ></el-table-column>
        <el-table-column prop="tags" label="标签" width="150"></el-table-column>
        <el-table-column
          prop="totals"
          label="题目数量"
          width="180"
        ></el-table-column>
        <el-table-column label="操作" width="300">
          <template v-slot='scope'>
            <el-button type="text" @click="classIfy(scope.row.id,scope.row)">学科分类</el-button>
            <el-button type="text" @click="label(scope.row.id,scope.row)">学科标签</el-button>
            <el-button type="text" @click="amendList(scope.row.id)">修改</el-button>
            <el-button type="text" @click="deleteRole(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        background
        :page-count="pages"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.pagesize"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { list, add, remove, update, detail } from '@/api/hmmm/subjects'
import dayjs from 'dayjs'
export default {
  name: 'Subjects',
  filters: {
    formatTime (time) {
      if (!time) return
      return dayjs(time).format('YYYY-MM-DD hh:mm:ss')
    }
  },
  data () {
    return {
      isEdit: false, // 是否是编辑
      roleForm: {
        name: '',
        isFrontDisplay: 0
      },
      counts: 0, // 数据总条数
      input: '', // 绑定输入框
      tableData: [], // 列表数据
      pages: 5, // 一共几页
      query: {
        pagesize: 10, // 每一页多少条数据
        page: 1 // 当前在第几页
      },
      centerDialogVisible: false, // 对话框
      delivery: false,
      rules: {
        name: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      },
      id: ''
    }
  },
  created () {
    // 调用获取列表数据的方法
    this.list()
  },
  methods: {
    addBtn () {
      this.centerDialogVisible = true
      this.roleForm = {
        name: '',
        isFrontDisplay: 0
      }
    },

    // 取消逻辑
    canCel () {
      this.centerDialogVisible = false
    },

    // 清除
    romvList () {
      this.input = ''
    },
    // 搜索
    async searchList () {
      const res = await list({ subjectName: this.input })
      // 总条数
      this.counts = res.data.counts

      // 分页数据
      this.pages = res.data.pages

      // 给列表赋值
      this.tableData = res.data.items
    },
    // 学科标签
    label (id, name) {
      this.$router.push({
        path: 'tags',
        query: {
          id: id,
          name: name.subjectName
        }

      })
    },
    // 学科分类
    classIfy (id, name) {
      this.$router.push({
        path: 'directorys',
        query: {
          id: id,
          name: name.subjectName
        }

      })
    },
    // 修改
    async amendList (id) {
      const res = await detail({ id })
      console.log(res)
      this.roleForm.name = res.data.subjectName
      // true代表为编辑弹框
      this.isEdit = true

      // 显示对话框
      this.centerDialogVisible = true
      this.id = id
    },
    // 删除
    async deleteRole (id) {
      const Resconfirm = await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      // 判断是否点击的是取消，如果是提示用户
      if (Resconfirm === 'cancel') return this.$message('以取消删除')

      // 调用接口
      await remove({ id })

      // 对分页异常做处理
      if (this.tableData.length === 1) {
        this.query.page--
        if (this.query.page <= 0) {
          this.query.page = 1
        }
      }

      // 提示用户删除成功
      this.$message.success('删除成功')

      // 重新刷新列表
      this.list()
    },
    // 新增
    clcikAff () {
      // 兜底验证
      this.$refs.roleForm.validate(async valid => {
        if (!valid) return
        // 发送请求
        await this.isEdit ? this.updateDate() : add({ subjectName: this.roleForm.name, isFrontDisplay: 1 })
        // 提醒用户：
        const res = this.isEdit ? '修改成功' : '添加成功'
        this.$message.success(res)
        // 重新获取列表
        this.list()
        // 关闭弹框
        this.centerDialogVisible = false
        // 清空输入框
        this.roleForm.name = ''
        this.isEdit = false
      })
    },
    // 获取列表数据
    async list () {
      // 调用接口
      const res = await list(this.query)

      // 总条数
      this.counts = res.data.counts

      // 分页数据
      this.pages = res.data.pages

      // 给列表赋值
      this.tableData = res.data.items
    },
    // 修改数据
    async updateDate (id) {
      const res = await update({ ...this.roleForm, subjectName: this.roleForm.name, id: this.id })
      console.log(res)
    },
    // 每页显示的条数发生改变时触发
    handleSizeChange (newSize) {
      this.query.pagesize = newSize
      this.list()
    },
    // 当前页码发生改变时触发
    handleCurrentChange (newPage) {
      this.query.page = newPage
      this.list()
    }
  }
}
</script>

<style scoped lang='scss'>
.box-card {
  margin: 0 10px;
}
.sizs {
  font-size: 14px;
  font-weight: 600;
}
::v-deep .el-icon-info:before {
  content: "\e7a1";
  font-size: 18px;
  line-height: 30px;
}
::v-deep .el-table th {
  background-color: #fafafa;
}
::v-deep .el-table th .is-leaf {
  border-bottom: 2px solid #ccc !important;
}
.table_content {
  margin-top: 10px;
}
.inp {
  margin: 0 8px;
  width: 200px;
}
.el-pagination {
  margin: 15px 20px;
  float: right;
}
</style>
